<script setup lang="ts">
import * as dayjs from "dayjs"
import { store } from '@/stores/allStores'
import { ref } from "vue";
import { computed } from "@vue/reactivity"
import { useRouter }from 'vue-router'
import { paramEncode,getImgPath }from'@/util/bussinessTool'
const props = defineProps({
    data: {
        type: Object,
        default: ()=>{
            statusEnum:''
        }
    },
    value: {
        type: Object,
        default: ()=>{}
    }
})
const stateEnum :mapType= {
    wait_pay: '待支付',
    wait_worker_accept: '待技师服务',
    wait_out: '待技师服务',
    wait_reach: '待技师服务',
    wait_start: '待技师服务',
    service: '正在服务中',
    complete: '订单已完成',
    user_cancel: '订单已取消',
    overdue: '支付超时',
    wait_user_comment: '等待评价',
    cancel_apply: '退款中'
}
let timeUp = ref(false)
interface mapType {
    [key:string]:any
}
const colorEnum = {
    yellow: "text-yellow-500",
    themeColor:`i-text-${store.common.themeName}`,
    gray:'text-gray-400'
}
const statusMap:mapType = {
    wait_pay:colorEnum.yellow,
    wait_worker_accept:colorEnum.themeColor,
    wait_out:colorEnum.themeColor,
    wait_reach:colorEnum.themeColor,
    wait_start:colorEnum.themeColor,
    service:colorEnum.themeColor,
    wait_user_comment:colorEnum.themeColor,
    user_cancel:colorEnum.gray,
    overdue:colorEnum.gray,
    complete:colorEnum.gray,
    cancel_apply:colorEnum.gray
}
const title = computed(()=>{
   return {
      content: timeUp.value ? stateEnum.overdue : stateEnum[props.data.statusEnum],
      color: statusMap[props.data.statusEnum]
   } 
})

function onDetail() {
    const router = useRouter()
    let query = paramEncode({id: props.data.id})
    router.push({name:'orderDetail',query:query})
}
/*
methods: {
    onDelete() {
        //删除订单
        this.$emit('onDelete', this.data)
    },
    onPay() {
        //立即支付
        this.$emit('onPay', this.data)
    },
    onServiceDetail() {
        uni.navigateTo({
            url: '/pages/serviceDetail/serviceDetail?payload=' + this.$encodePageParams({
                id: this.data.id
            })
        })
    },
}
*/
</script>
<template>
    <div class="bg-white i-px-10 i-py-15 i-m-10" @tap.stop="onDetail">
        <div class="flex justify-between i-mb-10 i-text-15 i-mb-10">
            <div class=" font-bold">{{ data.name }}</div>
            <div class="font-semibold" :class="title.color">
                {{  title.content}}
            </div>
        </div>
        <div class="flex items-star" :class="{ 'border-b border-gray-300 ': data.statusEnum === 'wait_pay' && !timeUp }">
            <img :src="getImgPath(data.workerAvatar)"  class="avatar" />
            <div class="text-gray-600 i-text-14 i-ml-10">
                <div>服务技师：{{ data.workerName }} </div>
                <div>预约时间：{{ data.appointStartTime }}</div>
                <div class="i-pb-5">实付金额：￥{{ data.payMoney }}</div>
            </div>
        </div>
        <!--  
            <div class="flex-between mt-30 text-weight-b" v-if="data.statusEnum === 'wait_pay' && !timeUp">
            <div class="flex text-size-m" style="align-items: center;">
                <com-countDown @timeup="timeUp = true" color="#FFFFFF" background-color="#f4511e" :fontSize="12"
                    splitorColor="#f4511e" :show-colon="false" :day="value.day" :hour="value.hour"
                    :minute="value.minute" :second="value.second" :showDay="false" :showHour="value.day !== 0">
                </com-countDown>
                <div class="ml-20" :style="{ color: themePaycolor }">后自动关闭支付</div>
            </div>
            <div style="display: flex;flex-flow: row-reverse;">
                <div @tap.stop="onPay">
                    <tm-button :bgcolor="$tm.vx.state().tmVuetify.color" size="m" :round="10" :width="160" :height="60">
                        立即支付</tm-button>
                </div>
            </div>
        </div>  
        -->  
    </div>   
</template>
<style lang="scss" scoped>
.avatar{
    border-radius: 50%;
    width: 60px;
    height: 60px;
}
</style>
